<template>
  <div>
    <!-- 大圆柱 -->
    <vc-entity :position="getBigCylinderPosition()" :name="data.endName">
      <vc-graphics-cylinder
        :length="getBigCylinderHeight()"
        :topRadius="data.terminalRadius"
        :bottomRadius="data.terminalRadius"
        :material="data.faceColor"
      ></vc-graphics-cylinder>
    </vc-entity>
    <!-- 小圆柱 -->
    <vc-entity :position="getSmallCylinderPosition()" :name="data.endName">
      <vc-graphics-cylinder
        :length="getSmallCylinderHeight()"
        :topRadius="data.corridorRadius"
        :bottomRadius="data.corridorRadius"
        :material="data.faceColor"
      ></vc-graphics-cylinder>
    </vc-entity>
    <!-- 连线 -->
    <vc-entity v-if="showLine">
      <vc-graphics-polyline
        :positions="getPolyLinePosition()"
        :material="data.lineColor"
        :arcType="0"
        :width="1"
        :clampToGround="false"
      ></vc-graphics-polyline>
    </vc-entity>
    <!-- 起点机场图标 -->
    <!-- <vc-entity :position="getLogoPosition()" v-if="showLogo">
			<vc-graphics-billboard :width="data.terminalRadius * 2" :height="data.terminalRadius * 2" :show="true" :scale="1"
				:image="airportImage"></vc-graphics-billboard>
		</vc-entity> -->
    <vc-entity :position="getLogoPosition()" v-if="false">
      <vc-graphics-model uri="/H.glb" :scale="0.1"></vc-graphics-model>
    </vc-entity>
    <vc-overlay-html :position="getLogoPosition()" :show="true" v-if="showLogo">
      <div style="color: #fff">{{ data.endName }}</div>
    </vc-overlay-html>
  </div>
</template>

<script setup>
import { toRefs } from "vue";
import {
  VcEntity,
  VcGraphicsBillboard,
  VcGraphicsCylinder,
  VcGraphicsPolyline,
  VcGraphicsModel,
  VcOverlayHtml,
} from "vue-cesium";

const props = defineProps({
  data: Object,
  showLine: Boolean,
  showLogo: Boolean,
});

const { data, showLine, showLogo } = toRefs(props);

// 机场图标坐标
const getLogoPosition = () => {
  return [
    data.value.endPoint.longitude,
    data.value.endPoint.latitude,
    data.value.endLogoHeight,
  ];
};
// 折线坐标
const getPolyLinePosition = () => {
  const bigPosition = getBigCylinderPosition();
  return [
    {
      lng: data.value.endPoint.longitude,
      lat: data.value.endPoint.latitude,
      height: data.value.endPoint.altitude,
    },
    { lng: bigPosition[0], lat: bigPosition[1], height: bigPosition[2] },
  ];
};

// 大圆柱坐标
const getBigCylinderPosition = () => {
  const altitude = getSmallCylinderHeight() + data.value.endPoint.altitude;
  return [
    data.value.endPoint.longitude,
    data.value.endPoint.latitude,
    altitude,
  ];
};

// 大圆柱高度
const getBigCylinderHeight = () => {
  return data.value.terminalUp - data.value.terminalDown;
};

// 小圆柱坐标
const getSmallCylinderPosition = () => {
  const altitude = data.value.endPoint.altitude + getSmallCylinderHeight() / 2;
  return [
    data.value.endPoint.longitude,
    data.value.endPoint.latitude,
    altitude,
  ];
};

// 小圆柱高度
const getSmallCylinderHeight = () => {
  return data.value.lineHeight - data.value.endPoint.altitude;
};
</script>

<style scoped></style>
